<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码强度分析工具 - Password Strength Analyser</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .container {
            background: rgba(30, 30, 46, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            width: 100%;
            max-width: 500px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            color: #e2e8f0;
            margin-bottom: 10px;
            font-size: 28px;
            font-weight: 700;
        }

        .header p {
            color: #94a3b8;
            font-size: 16px;
            line-height: 1.5;
        }

        .input-group {
            position: relative;
            margin-bottom: 20px;
        }

        .password-input {
            width: 100%;
            padding: 15px 50px 15px 15px;
            border: 2px solid #374151;
            border-radius: 12px;
            font-size: 16px;
            transition: all 0.3s ease;
            background: #1f2937;
            color: #e2e8f0;
        }

        .password-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
        }

        .password-input::placeholder {
            color: #6b7280;
        }

        .toggle-btn {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            font-size: 18px;
            color: #94a3b8;
            transition: color 0.3s ease;
        }

        .toggle-btn:hover {
            color: #e2e8f0;
        }

        .strength-meter {
            height: 8px;
            background: #374151;
            border-radius: 4px;
            overflow: hidden;
            margin-bottom: 15px;
        }

        .strength-fill {
            height: 100%;
            transition: all 0.3s ease;
            border-radius: 4px;
        }

        .strength-info {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }

        .strength-label {
            font-weight: 600;
            font-size: 16px;
        }

        .strength-score {
            font-size: 14px;
            color: #94a3b8;
        }

        .crack-time {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
            color: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            margin-bottom: 20px;
        }

        .crack-time h3 {
            margin-bottom: 5px;
            font-size: 18px;
        }

        .crack-time p {
            font-size: 24px;
            font-weight: 700;
        }

        .suggestions {
            background: #1f2937;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
            border: 1px solid #374151;
        }

        .suggestions h3 {
            color: #e2e8f0;
            margin-bottom: 15px;
            font-size: 18px;
        }

        .suggestion-list {
            list-style: none;
        }

        .suggestion-list li {
            padding: 8px 0;
            color: #cbd5e1;
            position: relative;
            padding-left: 25px;
        }

        .suggestion-list li:before {
            content: '•';
            color: #667eea;
            font-weight: bold;
            position: absolute;
            left: 0;
        }

        .requirements {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-bottom: 20px;
        }

        .requirement {
            display: flex;
            align-items: center;
            padding: 10px;
            background: #1f2937;
            border-radius: 8px;
            font-size: 14px;
            color: #94a3b8;
            border: 1px solid #374151;
        }

        .requirement.met {
            background: #064e3b;
            color: #6ee7b7;
            border-color: #059669;
        }

        .requirement.not-met {
            background: #7f1d1d;
            color: #fca5a5;
            border-color: #dc2626;
        }

        .requirement-icon {
            margin-right: 8px;
            font-size: 16px;
        }

        .footer {
            text-align: center;
            color: #94a3b8;
            font-size: 14px;
            border-top: 1px solid #374151;
            padding-top: 20px;
        }

        .privacy-note {
            background: #1e3a8a;
            border: 1px solid #3b82f6;
            border-radius: 8px;
            padding: 15px;
            margin-bottom: 20px;
            color: #bfdbfe;
        }

        .privacy-note strong {
            color: #dbeafe;
        }

        @media (max-width: 600px) {
            .container {
                padding: 30px 20px;
            }
            
            .requirements {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🔐 密码强度分析工具</h1>
            <p>检测您的密码强度，保护您的数字安全</p>
        </div>

        <div class="privacy-note">
            <strong>🛡️ 隐私保护：</strong>所有分析都在您的设备上进行，密码不会发送到任何服务器。
        </div>

        <div class="input-group">
            <input type="password" id="passwordInput" class="password-input" placeholder="请输入您的密码...">
            <button class="toggle-btn" id="toggleBtn" title="显示/隐藏密码">👁️</button>
        </div>

        <div class="strength-meter">
            <div class="strength-fill" id="strengthFill"></div>
        </div>

        <div class="strength-info">
            <span class="strength-label" id="strengthLabel">请输入密码</span>
            <span class="strength-score" id="strengthScore">0/5</span>
        </div>

        <div class="crack-time" id="crackTime" style="display: none;">
            <h3>预估破解时间</h3>
            <p id="crackTimeValue">-</p>
        </div>

        <div class="requirements">
            <div class="requirement" id="lengthReq">
                <span class="requirement-icon">📏</span>
                <span>至少8个字符</span>
            </div>
            <div class="requirement" id="lowercaseReq">
                <span class="requirement-icon">🔤</span>
                <span>包含小写字母</span>
            </div>
            <div class="requirement" id="uppercaseReq">
                <span class="requirement-icon">🔠</span>
                <span>包含大写字母</span>
            </div>
            <div class="requirement" id="numberReq">
                <span class="requirement-icon">🔢</span>
                <span>包含数字</span>
            </div>
            <div class="requirement" id="specialReq">
                <span class="requirement-icon">⚡</span>
                <span>包含特殊字符</span>
            </div>
            <div class="requirement" id="lengthStrongReq">
                <span class="requirement-icon">💪</span>
                <span>至少12个字符</span>
            </div>
        </div>

        <div class="suggestions" id="suggestions" style="display: none;">
            <h3>💡 改进建议</h3>
            <ul class="suggestion-list" id="suggestionList"></ul>
        </div>

        <div class="footer">
            <p>🔒 您的密码安全是我们的首要关注 | 完全本地化处理</p>
        </div>
    </div>

    <script>
        class PasswordAnalyzer {
            constructor() {
                this.passwordInput = document.getElementById('passwordInput');
                this.toggleBtn = document.getElementById('toggleBtn');
                this.strengthFill = document.getElementById('strengthFill');
                this.strengthLabel = document.getElementById('strengthLabel');
                this.strengthScore = document.getElementById('strengthScore');
                this.crackTime = document.getElementById('crackTime');
                this.crackTimeValue = document.getElementById('crackTimeValue');
                this.suggestions = document.getElementById('suggestions');
                this.suggestionList = document.getElementById('suggestionList');
                
                this.requirements = {
                    length: document.getElementById('lengthReq'),
                    lowercase: document.getElementById('lowercaseReq'),
                    uppercase: document.getElementById('uppercaseReq'),
                    number: document.getElementById('numberReq'),
                    special: document.getElementById('specialReq'),
                    lengthStrong: document.getElementById('lengthStrongReq')
                };

                this.init();
            }

            init() {
                this.passwordInput.addEventListener('input', () => this.analyzePassword());
                this.toggleBtn.addEventListener('click', () => this.togglePasswordVisibility());
            }

            togglePasswordVisibility() {
                const type = this.passwordInput.type === 'password' ? 'text' : 'password';
                this.passwordInput.type = type;
                this.toggleBtn.textContent = type === 'password' ? '👁️' : '🙈';
            }

            analyzePassword() {
                const password = this.passwordInput.value;
                
                if (!password) {
                    this.resetDisplay();
                    return;
                }

                const analysis = this.calculateStrength(password);
                this.updateDisplay(analysis);
            }

            calculateStrength(password) {
                const checks = {
                    length: password.length >= 8,
                    lengthStrong: password.length >= 12,
                    lowercase: /[a-z]/.test(password),
                    uppercase: /[A-Z]/.test(password),
                    number: /[0-9]/.test(password),
                    special: /[^A-Za-z0-9]/.test(password)
                };

                let score = 0;
                let strength = '';
                let color = '';

                // 计算基础分数
                if (checks.length) score += 1;
                if (checks.lowercase) score += 1;
                if (checks.uppercase) score += 1;
                if (checks.number) score += 1;
                if (checks.special) score += 1;

                // 额外分数
                if (checks.lengthStrong) score += 0.5;
                if (password.length >= 16) score += 0.5;

                // 确定强度等级
                if (score < 2) {
                    strength = '极弱';
                    color = '#ff4757';
                } else if (score < 3) {
                    strength = '弱';
                    color = '#ff6b6b';
                } else if (score < 4) {
                    strength = '中等';
                    color = '#feca57';
                } else if (score < 5) {
                    strength = '强';
                    color = '#48dbfb';
                } else {
                    strength = '极强';
                    color = '#0be881';
                }

                const crackTime = this.estimateCrackTime(password);
                const suggestions = this.generateSuggestions(checks, password);

                return {
                    score: Math.min(score, 5),
                    strength,
                    color,
                    checks,
                    crackTime,
                    suggestions
                };
            }

            estimateCrackTime(password) {
                let charset = 0;
                if (/[a-z]/.test(password)) charset += 26;
                if (/[A-Z]/.test(password)) charset += 26;
                if (/[0-9]/.test(password)) charset += 10;
                if (/[^A-Za-z0-9]/.test(password)) charset += 32;

                const combinations = Math.pow(charset, password.length);
                const guessesPerSecond = 1000000000; // 假设每秒10亿次尝试
                const seconds = combinations / (2 * guessesPerSecond);

                return this.formatTime(seconds);
            }

            formatTime(seconds) {
                if (seconds < 1) return '瞬间';
                if (seconds < 60) return `${Math.round(seconds)} 秒`;
                if (seconds < 3600) return `${Math.round(seconds / 60)} 分钟`;
                if (seconds < 86400) return `${Math.round(seconds / 3600)} 小时`;
                if (seconds < 31536000) return `${Math.round(seconds / 86400)} 天`;
                if (seconds < 31536000 * 100) return `${Math.round(seconds / 31536000)} 年`;
                return '数千年';
            }

            generateSuggestions(checks, password) {
                const suggestions = [];

                if (!checks.length) {
                    suggestions.push('增加密码长度至少8个字符');
                }
                if (!checks.lengthStrong) {
                    suggestions.push('建议使用至少12个字符以提高安全性');
                }
                if (!checks.lowercase) {
                    suggestions.push('添加小写字母 (a-z)');
                }
                if (!checks.uppercase) {
                    suggestions.push('添加大写字母 (A-Z)');
                }
                if (!checks.number) {
                    suggestions.push('添加数字 (0-9)');
                }
                if (!checks.special) {
                    suggestions.push('添加特殊字符 (!@#$%^&*)');
                }

                // 检查常见模式
                if (/^[a-zA-Z]+$/.test(password)) {
                    suggestions.push('避免只使用字母，混合使用不同类型的字符');
                }
                if (/123|abc|qwe/i.test(password)) {
                    suggestions.push('avoid使用连续的字符序列');
                }
                if (password.length < 16) {
                    suggestions.push('考虑使用更长的密码以获得最佳安全性');
                }

                return suggestions;
            }

            updateDisplay(analysis) {
                // 更新强度条
                this.strengthFill.style.width = `${(analysis.score / 5) * 100}%`;
                this.strengthFill.style.background = analysis.color;

                // 更新标签
                this.strengthLabel.textContent = `密码强度：${analysis.strength}`;
                this.strengthLabel.style.color = analysis.color;
                this.strengthScore.textContent = `${analysis.score.toFixed(1)}/5`;

                // 更新破解时间
                this.crackTime.style.display = 'block';
                this.crackTimeValue.textContent = analysis.crackTime;

                // 更新要求检查
                Object.keys(analysis.checks).forEach(key => {
                    const element = this.requirements[key];
                    if (element) {
                        element.className = `requirement ${analysis.checks[key] ? 'met' : 'not-met'}`;
                    }
                });

                // 更新建议
                if (analysis.suggestions.length > 0) {
                    this.suggestions.style.display = 'block';
                    this.suggestionList.innerHTML = analysis.suggestions
                        .map(suggestion => `<li>${suggestion}</li>`)
                        .join('');
                } else {
                    this.suggestions.style.display = 'none';
                }
            }

            resetDisplay() {
                this.strengthFill.style.width = '0%';
                this.strengthLabel.textContent = '请输入密码';
                this.strengthLabel.style.color = '#666';
                this.strengthScore.textContent = '0/5';
                this.crackTime.style.display = 'none';
                this.suggestions.style.display = 'none';

                Object.values(this.requirements).forEach(element => {
                    element.className = 'requirement';
                });
            }
        }

        // 初始化应用
        document.addEventListener('DOMContentLoaded', () => {
            new PasswordAnalyzer();
        });
    </script>
</body>
</html>